<template>
  <UploadAvatar v-if="column.type == 'avatar'" v-model="value" bucket="bucket1" :accept="column.accept" />
  <!-- <el-color-picker v-else-if="column.type == 'colorSelect'" v-model="value"></el-color-picker> -->
  <el-input v-else-if="column.type == 'text'" type="textarea" v-model="value" />
  <ElDatePicker v-else-if="column.type == 'date'" v-model="value" type="date" value-format="YYYY-MM-DD" />
  <!-- <Lookup v-else-if="column.type == 'fk'" v-model="value" :alias="column.fkAlias" /> -->
  <InputPassword v-else-if="column.type == 'password'" v-model="value" strength />
  <el-select v-else-if="column.type == 'enum'" v-model="value" placeholder="请选择">
    <el-option v-for="(value, key) in column.options" :label="value" :value="key" />
  </el-select>
  <el-radio-group v-else-if="column.type == 'yesno'" v-model="value" >
    <el-radio label="是" value="yes" />
    <el-radio label="否" value="no" />
  </el-radio-group>
  <el-input-number v-else-if="column.type == 'float'" v-model="value" :precision="2" :step="0.1" :max="100" />
  <Editor v-else-if="column.type == 'longtext'" v-model="value"  />
  <el-input v-else v-model="value" />
</template>
<script setup lang="ts">
  import { ElInput, ElSelect, ElOption, ElDatePicker,ElInputNumber,ElRadioGroup,ElRadio} from 'element-plus'
  import { Editor } from '@/components/Editor';
  import { UploadAvatar } from '@/components/upload';
 
  import { InputPassword } from '@/components/InputPassword';
  import { Lookup } from '@/components/Panel';
  import { ref, watchEffect, watch } from 'vue'
  import { Column } from '@/seed-application/types';

  const props = defineProps<{column: Column, modelValue: any}>()

  const emit = defineEmits(['update:modelValue'])

  const value = ref(props.modelValue)
  const valueFormats = {
    datetime: "YYYY-MM-DD HH:mm:ss",
    date: "YYYY-MM-DD",
    time: "HH:mm:ss"
  }
  const numbers = ['tinyint', 'smallint', 'mediumint', 'int', 'float', 'bigint', 'double', 'decimal']
  const numberRanges = [
    'tinyintrange', 'smallintrange', 'mediumintrange', 'intrange',
    'floatrange', 'bigintrange', 'doublerange', 'decimalrange'
  ]
  const dates = [
    'date','year','years','month','dates','week','datetimerange',
    'daterange','monthrange','datetime','timestamp'
  ]
  watchEffect(() => emit('update:modelValue', value.value))
  watch(() => props.modelValue, (val) => value.value = val)
</script>
